import React, { useState, useEffect } from 'react';
import { View, Text } from '@tarojs/components';

import './tabs.scss';

const Tabs = ({ tabsList = [], getCurrentTab = null, defaultTab = 0 }) => {
  const [currentTab, setCurrentTab] = useState(defaultTab);

  const setTab = (index) => {
    if (index !== currentTab) {
      setCurrentTab(index);
      getCurrentTab && getCurrentTab(index);
    }
  };

  useEffect(() => {
    if (currentTab != defaultTab) {
      setCurrentTab(defaultTab);
    }
  }, [defaultTab]);

  return (
    <View className="goodsDetailTabs">
      {tabsList.map((tab, index) => (
        <View
          className="item flex-column-center-center"
          onClick={() => setTab(index)}
          key={tab.label + '_' + index}
        >
          <Text className={['label', currentTab === index && 'act'].join(' ')}>{tab.label}</Text>
          {currentTab === index && <Text className="active customePageBackgroundStyle"></Text>}
        </View>
      ))}
    </View>
  );
};

export default Tabs;
